웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[CSS] text-overlfliw ellipsis 속성 inline 속성에 적용 안되는 경우
Last Modified : 2019-02-07 / Created : 2016-01-25
텍스트가 길어질 경우 생략 기호로 나타내는 방법으로 text-overfliw: ellipsis 속성과 값을 사용할 수 있습니다. 이 속성은 게시판등에 자주 사용하는 속성입니다.
! 만약 text-overfliw: ellipsis 속성이 적용이 안된다면?
이 속성은 display 속성이 inline인 경우에 적용이 되지 않습니다. 그렇기 때문에 만약 정상적으로 출력되지 않는다면 가장 먼저 해당 요소의 display 속성을 확인해보세요.
확인 결과 display 속성값이 inline이라면? 그런 경우... 즉, 선택한 요소의 display 속성값이 inline이라면 아래와 같이 간단하게 수정하여 적용할 수 있습니다.
@ 변경 전 속성
<style>
display: inline;
</style>
display: inline;
</style>
@ 변경 후 속성
<style>
display: inline-block;
</style>
display: inline-block;
</style>
찾아본 결과 이 방법이 가장 간단한 방법으로 확인할 수 있었습니다. 아쉽게도 inline 의 경우 text-overflow를 적용할 수 있는 방법이 없더군요. 그래서 생각할 수 있는 방법은 텍스트 길이를 맞춰 자른 후 뒤에 ... 문자를 강제로 추가하는 방법을 생각할 수 있을 것입니다.
하지만 브라우저마다 렌더링되는 폰트 길이가 차이가 나므로 적확한 폰트 길이를 맞추기 어려운 점이 단점입니다.
아래의 글도 찾고 계시지 않나요?
